<template>
    <div class="zongti">
        <div class="djdl">
            <img class="imga" src="" alt="">
           <div class="p1"> <p class="p11" @click="loginfn">点击登录</p></div>
            <p class="p2">&gt;</p>
        </div>
            <van-popup v-model:show="is_show" :style="{ padding: '10px' }">
                <van-form @submit="onSubmit">
                    <van-cell-group inset>
                        <van-field
                        v-model="username"
                        name="用户名"
                        label="用户名"
                        placeholder="用户名"
                        :rules="[{ required: true, message: '请填写用户名' }]"
                        />
                        <van-field
                        v-model="pwd"
                        type="password"
                        name="密码"
                        label="密码"
                        placeholder="密码"
                        :rules="[{ required: true, message: '请填写密码' }]"
                        />
                    </van-cell-group>
                    <div style="margin: 16px;">
                        <van-button round block type="primary" native-type="submit">
                        提交
                        </van-button>
                    </div>
                </van-form>
            </van-popup>
        <div class="jiugongge">
            <van-grid :column-num="3" gutter="50px" >
                <van-grid-item icon="photo-o" text="我的订单" />
                <van-grid-item icon="photo-o" text="优惠券" />
                <van-grid-item icon="photo-o" text="礼品卡" />
                <van-grid-item icon="photo-o" text="我的收藏" />
                <van-grid-item icon="photo-o" text="我的足迹" />
                <van-grid-item icon="photo-o" text="会员福利" />
                <van-grid-item icon="photo-o" text="地址管理" />
                <van-grid-item icon="photo-o" text="账号安全" />
                <van-grid-item icon="photo-o" text="联系客服" />
                <van-grid-item icon="photo-o" text="帮助中心" />
                <van-grid-item icon="photo-o" text="意见反馈" />
            </van-grid>
        </div>
    </div>
</template>
<script name="fhdWoDe" lang="ts" setup>
import { ref } from "vue";
import { loginapi } from "../../api/mine";
const is_show = ref<boolean>(false)
const loginfn = ()=>{
    is_show.value = true;
}
const username = ref('');
const pwd = ref('');
const onSubmit = (values:{
    "密码": string,
    "用户名": string
}) => {
      console.log('submit', values);
      loginapi({
        username:values['用户名'],
        pwd:values['密码']
      }).then(res =>{
        console.log(res);
        
      })
    };

</script>
<style scoped lang="scss">
.jiugongge{
    padding: 50px 0 50px 0;
    overflow: auto;
}
.zongti{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
    .djdl{
        height: 117px;
        background-color: rgb(51, 51, 51);
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        z-index: 1000;
    }
    .imga{
        height: 70px;
        width: 70px;
        border-radius: 50%;
    }
    .p1{
        width: 280px;
    }
    .p11{
        color: white;
    }
    .p2{
        color: white;
        height: 20px;
    }
</style>